<script setup>
import { ref,reactive,onMounted  } from 'vue'
import {Expand, Refresh, Search, View} from "@element-plus/icons-vue";
import {useResizeObserver} from '@vueuse/core'
import dayjs from "dayjs";
import API from "@/utils/axiosInstance.js"
import {ElMessage} from "element-plus";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

const tableHeight = ref(600)
const queryDiv = ref();
useResizeObserver(queryDiv,(entries)=>{
  const entry = entries[0];
  tableHeight.value = window.innerHeight - entry.contentRect.height - 160;
})

const queryParam = reactive({
  startDate: '',
  endDate: '',
  goods: '',
  batchCode: ''
})

queryParam.startDate = dayjs(new Date()).format("YYYY-MM")+"-01";
queryParam.endDate = dayjs(new Date()).format("YYYY-MM-DD");

let tableData =  ref([])
let headerData = ref([])
let total = ref(0)
let small = ref(true)
let currentPage = ref(1);
let pageSize = ref(50);
let userInfo = reactive({});
const uf_query = () =>{
  let params = {};
  params["M_PRO_NAME"] = "PROC_APP_PURORDER";
  params["@ACTION"] = 2;
  params["@PAGEINDEX"] = currentPage.value;
  params["@PAGESIZE"] = pageSize.value;
  params["@STARTDATE"] = queryParam.startDate;
  params["@ENDDATE"] = queryParam.endDate;
  params["@GOODS"] = queryParam.goods;
  params["@BATCHCODE"] = queryParam.batchCode;
  params["@STAFFID"] = userInfo.STAFFID;
  API.post('/call',params).then((res)=>{
    const data  = res.data;
    if(data.code==="200" && data.data.DATASET.length>0){
      tableData.value = data.data.DATASET;
      console.log(tableData);
    }
  })

  params["@ACTION"] = 3;
  API.post('/call',params).then((res)=>{
    const data  = res.data;
    if(data.code==="200" && data.data.DATASET.length>0){
      total.value = data.data.DATASET[0].ROW;
    }
  })

}

const handleCurrentChange = (val) =>{
  console.log(val);
  currentPage.value = val;
  uf_query();
}

console.log(headerData);

const allExport = () =>{
  let name = "采购";
  let wb = XLSX.utils.table_to_book(document.querySelector(".table"));
  let wbout = XLSX.write(wb,{
    bookType:"xlsx",
    bookSST:true,
    type:"array"
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout],{type:"application/octet-stream"}),
      name + ".xlsx"
    );
  }catch (e){
    if(typeof console!=="undefined") console.log(e,wbout);
  }
  return wbout;
}

onMounted(()=>{
  API.post('/call',{"M_PRO_NAME":"PROC_APP_PURORDER","@ACTION":"1"}).then((res)=>{
    const data  = res.data;
    if(data.code==="200" && data.data.DATASET.length>0){
      headerData.value = data.data.DATASET;
    }
  })
  userInfo = JSON.parse(localStorage.getItem("USERINFO"));
})

</script>

<template>

  <el-card class="box-card" ref="queryDiv">
    <el-form :model="queryParam" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="请输入开始日期">
            <el-date-picker
                v-model="queryParam.startDate"
                type="date"
                placeholder="请输入开始日期"
                clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束日期">
            <el-date-picker
                v-model="queryParam.endDate"
                type="date"
                placeholder="请输入结束日期"
                clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品检索">
            <el-input v-model="queryParam.goods" placeholder="请输入编号/名称/规格/厂家" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批号检索">
            <el-input v-model="queryParam.batchCode" placeholder="请输入批号" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2">
          <el-button type="primary" :icon="Search" @click="uf_query">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" :icon="Refresh">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" :icon="Expand" @click="allExport">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <el-card>
    <el-table :data="tableData" border style="width: 100%" :height=tableHeight stripe show-summary sum-text="合计" class="table">
      <el-table-column  :sortable="item.SORTABLE=='TRUE'" :fixed="item.FIXED=='TRUE'" :prop="item.VALUE" :label="item.KEYKEY" :width="item.WIDTH"  v-for="(item,index) in headerData" header-align="center" />
    </el-table>
    <br/>
    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
    />
  </el-card>

</template>

<style scoped>
.t-el-header{
  height: 100%;
  width: 100%;
  margin-top: 5px;
  left: 5px;
}
</style>
